<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">

  <title>Insert title here</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="./static/css/style.css">

  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    body {
      background-color: white;

    }

    #app {
      background-color: white;

    }

    .form {
      width: 300px;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-form v-if="userbase" :rules="rules" ref="userbase" :model="form" class="form" label-width="80px">
      <el-form-item label="头像">
        <el-upload class="avatar-uploader" action="/photo/upload" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="userbase.imgurl" :src="userbase.imgurl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="账户名称">
        <el-input v-model="userbase.name" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="userbase.info"></el-input>

      </el-form-item>
      <el-form-item  label="手机号">
        <el-input minlength="11" maxlength="11" v-model="userbase.phone"></el-input>

      </el-form-item>
      <el-form-item label="账户类型">
        <el-input v-model="userbase.groupid" :disabled="true"></el-input>

      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="save('userbase')" size="small">保存</el-button>

      </el-form-item>
    </el-form>
  </div>

  <script type="text/javascript" src="lib/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data() {
        var checkPhone = (rule, value, callback) => {
          const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
          if (!value) {
            return callback(new Error('电话号码不能为空'))
          };
          setTimeout(() => {
            if (!Number.isInteger(+value)) {
              callback(new Error('请输入数字值'))
            } else {
              if (phoneReg.test(value)) {
                callback()
              } else {
                callback(new Error('电话号码格式不正确'))
              }
            }
          }, 100)
        };
        return {
          userbase: undefined,
          form: {
            region: "",
            name: "",
            type: ""
          },
          rules: {
            phone: [
              { required: true, message: '请输入手机号', trigger: 'blur' },
              { min: 11, max: 11, message: '长度在11个字符', trigger: 'blur' },
              { validator: checkPhone, trigger: 'blur' }

            ],
          }
        }
      },
      mounted() {
        this.getuserbase();
      },
      methods: {
        save(userbase) {
          this.$refs[userbase].validate((ispass) => {
            axios.post("/user/updateuser", this.userbase).then(res => {
              console.log(res)
              if (res.data.result == "1001") {
                this.$notify.success({
                  title: '保存信息',
                  message: '保存成功'
                })
                localStorage.setItem("userbase", JSON.stringify(this.userbase))
              } else {
                this.$notify.error({
                  title: '保存信息',
                  message: '保存失败'
                })
              }
            })
          })
        },
        beforeAvatarUpload() {

        },
        handleAvatarSuccess(res, file) {
          console.log(res)
          this.userbase.imgurl = res;
        },
        getuserbase() {
          var parm = localStorage.getItem("userbase");
          if (parm != null) {
            this.userbase = JSON.parse(parm);

          }
        },
        logout() {
          axios.post("/logout").then(res => {
            console.log(res);
            console.log(this.loginform);
          })
        },
        resetpass() {
          console.log("resetpass");
        },

      }
    });
  </script>
</body>

</html>